<template>
  <!-- .sync修改父组件show变量，会报错=》违背了
单向数据流
 -->
  <el-dialog :title="statuscode==='edit'?'修改':'新增'" :visible="show" @close="close" @open="open">
    <!-- 表单 -->
    <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="ruleForm.name" type="text" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="ruleForm.code" type="text" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="部门管理者" prop="manager">
        <el-input v-model="ruleForm.manager" type="text" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="ruleForm.introduce" type="textarea" placeholder="请输入部门名称" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" size="small" @click="addDept">{{ statuscode==='edit'?'修改':'新增' }}</el-button>
      <el-button size="small" @click="quxiaoFn">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { xinzen, xiugai, xiangxishuju } from '@/api/deeptress'
export default {
  props: {
    // 父组件传递过来show变量，控制弹层显隐
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    statuscode: {
      type: String,
      default: 'add'
    },
    // 获取所有列表的数据
    data: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    const validatePa = (rules, val, next) => {
      let flg
      // 修改
      if (this.statuscode === 'edit') {
        flg = this.data.some(item => item.code === val) && this.jiaoyan !== val
      } else {
        flg = this.data.some(item => item.code === val)
      }
      if (flg) {
        next(new Error('部门编码重复了！'))
      } else {
        next()
      }
    }
    return {
      ruleForm: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      // 校验修改时code
      jiaoyan: '',
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: ['blur', 'change'] }
        //   { validator: validatePass, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: ['blur', 'change'] },
          { validator: validatePa, trigger: ['blur', 'change'] }
        ],
        manager: [
          { required: true, message: '请输入部门管理者', trigger: ['blur', 'change'] }
        //   { validator: checkAge, trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: ['blur', 'change'] }
        //   { validator: checkAge, trigger: 'blur' }
        ]
      }

    }
  },

  methods: {
    // 新增、修改
    addDept() {
      this.$refs.ruleForm.validate(async(val) => {
        if (val) {
          // 修改
          if (this.statuscode === 'edit') {
            console.log('我是修改')
            await xiugai(this.ruleForm)
          } else {
            // 新增
            // 设置为父级标签
            this.ruleForm = { ...this.ruleForm, pid: this.id || null }
            await xinzen(this.ruleForm)
          }
          this.close(1)
        }
      })
    },
    // 取消重置表单
    quxiaoFn() {
      // 重置表单
      this.$refs.ruleForm.resetFields()
    },
    // 弹层关闭会执行
    close(a = 0) {
    //   console.log('弹层关闭会执行')
      // 修改父组件show变量=》子传父
    //   a 为判断是否新增或修改  1为true 0 false
      this.$emit('guanbi', a)
      // 清空
      this.formData = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }
      // 重置表单
      this.$refs.ruleForm.resetFields()
    },
    // 获取id详细数据
    async shuju() {
      const res = await xiangxishuju(this.id)
      this.ruleForm = res
      this.jiaoyan = res.code
    },
    // 打开时执行
    open() {
      if (this.statuscode === 'edit') {
        this.shuju()
        console.log(11)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
